<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-row type="flex" justify="space-between" style="margin: 0 0 10px 0">
          <a-col>
            <a-row type="flex">
              <a-col style="margin-right: 10px; margin-top: 10px">
                <a-input v-model="keyword" placeholder="请输入关键字"></a-input>
              </a-col>
              <a-col style="margin-right: 10px; margin-top: 10px">
                <a-select ref="select" style="width: 150px" placeholder="请选择上架状态">
                  <a-select-option value="jack">未上架</a-select-option>
                  <a-select-option value="lucy">已上架</a-select-option>
                  <a-select-option value="lucy">上架中</a-select-option>
                </a-select>
              </a-col>
              <a-col style="margin-right: 10px; margin-top: 10px">
                <a-select ref="select" style="width: 150px" placeholder="请选择审核状态">
                  <a-select-option value="jack">未审核</a-select-option>
                  <a-select-option value="lucy">已审核</a-select-option>
                  <a-select-option value="lucy">审核中</a-select-option>
                </a-select>
              </a-col>
              <a-col style="margin-right: 10px; margin-top: 10px">
                <a-range-picker
                  format="YYYY-MM-DD HH:mm:ss"
                  :disabled-date="disabledDate"
                  :disabled-time="disabledDateTime"
                  :placeholder="['更新开始时间', '更新结束时间']"
                  v-model="value"
                />
              </a-col>
              <a-col style="margin-right: 10px; margin-top: 10px">
                <a-range-picker
                  format="YYYY-MM-DD HH:mm:ss"
                  :disabled-date="disabledDate"
                  :placeholder="['截止开始时间', '截止结束时间']"
                  :disabled-time="disabledDateTime"
                  v-model="value"
                />
              </a-col>
              <a-col>
                <a-config-provider style="margin-top: 10px" :auto-insert-space-in-button="false">
                  <a-button type="primary" @click="toSearch">查找</a-button>
                </a-config-provider>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <div style="text-align: right">
          <a-button type="primary" style="margin-right: 30px" @click="showModal(false, -1)">新增</a-button>
          <a-button type="danger" @click="delSystemMsg">删除</a-button>
        </div>
      </div>
      <a-table
        :scroll="{ x: 1500 }"
        :row-selection="rowSelection"
        :columns="columns"
        :data-source="systemMsgList"
        bordered
        :pagination="pagination"
        :rowKey="(record) => record.id"
      >
        <!-- <span slot="customTitle">创建时间<a-icon type="caret-up" /><a-icon type="caret-down" /></span> -->
        <template slot="edit" slot-scope="text, record">
          <a-button type="link"><span @click="showModal(record, 1)">详情</span></a-button>
          <a-button type="link"><span @click="showModal(record, 1)">下架</span></a-button>
          <a-button type="link"><span @click="showModal(record, 1)">编辑</span></a-button>
          <a-button type="link"><span @click="showModal(record, 1)">删除</span></a-button>
        </template>
      </a-table>
    </a-card>
    <!-- <a-modal v-model="visible"  :title="title" @cancel="cancel" ok-text="提交" @ok="submitForm(form)" :width="800"> -->
    <a-modal v-model="visible" :title="title" :width="800">
      <template slot="footer">
        <a-button key="back" @click="cancel">关闭</a-button>
        <a-button v-if="showOk" key="submit" type="primary" @click="submitForm(form)">提交</a-button>
      </template>
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="产品标题:" prop="title">
          <a-input placeholder="请输入产品标题" :disabled="!showOk" v-model="form.title" />
        </a-form-model-item>
        <a-form-model-item label="产品概述:" prop="formArea">
          <a-textarea
            placeholder="  请简要概括的用一句话描述产品。"
            :disabled="!showOk"
            v-model="form.formArea"
            :auto-size="{ minRows: 5, maxRows: 100 }"
          />
        </a-form-model-item>
        <a-form-model-item label="产品链接:" prop="formArea">
          <a-input placeholder="请输入产品链接" :disabled="!showOk" v-model="form.formArea" />
        </a-form-model-item>
        <a-form-model-item label="服务热线:" prop="formArea">
          <a-input placeholder="请输入服务电话" :disabled="!showOk" v-model="form.formArea" />
        </a-form-model-item>
        <a-form-model-item label="产品介绍:" prop="formArea">
          <a-textarea
            placeholder="产品介绍"
            :disabled="!showOk"
            v-model="form.formArea"
            :auto-size="{ minRows: 5, maxRows: 100 }"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { getPageList, addSystemMsg, getSystemMsgById, deleteBatchIds } from '@/api/sendManage'
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        formArea: [{ required: true, message: '请输入内容', trigger: 'blur' }],
      },
      pagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.onPageChange(page, pageSize),
      },
      index: 0,
      visible: false,
      keyword: '', //列表搜索关键字
      value: [],
      form: {
        title: '',
        formArea: '',
      },
      isAse: true, //排序--是否正序
      showOk: true, //是否显示提交按钮
      systemMsgList: [
        {
          1: '好信贷,更安心',
          2: 'CP234212',
          3: '2023-12-23 12:00:00',
          4: '2023-12-23 12:00:00',
          5: '未上架',
          6: '已通过',
          7: '截止时间',
        },
        {
          1: '好信贷,更安心',
          2: 'CP234212',
          3: '2023-12-23 12:00:00',
          4: '2023-12-23 12:00:00',
          5: '未上架',
          6: '已通过',
          7: '截止时间',
        },
        {
          1: '好信贷,更安心',
          2: 'CP234212',
          3: '2023-12-23 12:00:00',
          4: '2023-12-23 12:00:00',
          5: '未上架',
          6: '已通过',
          7: '截止时间',
        },
        {
          1: '好信贷,更安心',
          2: 'CP234212',
          3: '2023-12-23 12:00:00',
          4: '2023-12-23 12:00:00',
          5: '未上架',
          6: '已通过',
          7: '截止时间',
        },
        {
          1: '好信贷,更安心',
          2: 'CP234212',
          3: '2023-12-23 12:00:00',
          4: '2023-12-23 12:00:00',
          5: '未上架',
          6: '已通过',
          7: '截止时间',
        },
        {
          1: '好信贷,更安心',
          2: 'CP234212',
          3: '2023-12-23 12:00:00',
          4: '2023-12-23 12:00:00',
          5: '未上架',
          6: '已通过',
          7: '截止时间',
        },
        
      ],
      selectedRowKeys: [], //列表选择key集合
      delIds: [], //待删除消息主键集合
      columns: [
        {
          title: '服务名称',
          dataIndex: '1',
          // align: 'center'
        },
        {
          title: '服务编号',
          dataIndex: '2',
          align: 'center',
          sorter: true,
          // slots: { title: 'customTitle'},
          customHeaderCell: this.headCellClick,
        },
        {
          title: '更新时间',
          dataIndex: '3',
          align: 'center',
          width:180
        },
        {
          title: '创建时间',
          dataIndex: '4',
          align: 'center',
          width:180
        },
        {
          title: '上架状态',
          dataIndex: '5',
          align: 'center',
        },
        {
          title: '审核状态',
          dataIndex: '6',
          align: 'center',
        },
        {
          title: '截止日期',
          dataIndex: '7',
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'edit',
          align: 'center',
          width: 280,
          fixed: 'right',
          scopedSlots: { customRender: 'edit' },
        },
      ],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //创建时间自定单击事件，排序
    headCellClick(column) {
      return {
        on: {
          click: () => {
            console.log('点击一下')
            this.isAse = !this.isAse
            this.getList()
          },
        },
      }
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let _param = {
            title: this.form.title,
            content: this.form.formArea,
          }
          addSystemMsg(_param)
            .then((res) => {
              console.log('新增')
              console.log(res)
              if (res.code === 200) {
                this.getList()
                this.$message.success('提交成功！')
                this.visible = false
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          // 填写错误
          return
        }
      })
    },
    //查找
    toSearch() {
      this.pagination.current = 1
      this.getList()
    },
    showModal(item, index) {
      this.form = { title: '', formArea: '' }
      if (index > 0) {
        // 查看
        this.showOk = false
        this.index = index
        console.log(item)
        this.form.title = item.title
        this.form.formArea = item.content
      } else {
        this.showOk = true
        this.index = index
      }
      this.visible = true
    },
    //关闭弹窗
    cancel() {
      this.form = { title: '', formArea: '' }
      // 清空表单校验
      this.$refs['ruleForm'].resetFields()
      this.visible = false
    },
    //变更每页条数
    onSizeChange(current, size) {
      this.pagination.current = current
      this.pagination.pageSize = size
      this.getList()
    },
    //翻页
    onPageChange(page, pageSize) {
      this.pagination.current = page
      this.getList()
    },
    //获取列表
    getList() {
      const _this = this
      let _param = {
        keyword: _this.keyword,
        isAse: _this.isAse,
        current: _this.pagination.current,
        size: _this.pagination.pageSize,
      }
      getPageList(_param)
        .then((res) => {
          console.log('系统消息')
          console.log(res)
          if (res.code === 200) {
            _this.systemMsgList = res.data.records
            _this.pagination.total = res.data.total
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //根据主键获取消息详细西悉尼
    getInfoById(msgId) {
      getSystemMsgById(msgId)
        .then((res) => {
          console.log('根据Id获取信息')
          console.log(res)
          if (res.code === 200) {
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //批量删除
    delSystemMsg() {
      const _this = this
      if (_this.delIds.length <= 0) {
        _this.$message.error('请选择要删除的消息')
      } else {
        console.log(_this.delIds)
        this.$confirm({
          title: '您确定要删除此信息吗?',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            // 点击确定
            deleteBatchIds(_this.delIds)
              .then((res) => {
                console.log('删除')
                console.log(res)
                if (res.code === 200) {
                  _this.$message.success('删除成功')
                  _this.selectedRowKeys = [] //删除成功清空选择
                  _this.getList()
                }
              })
              .catch((err) => {
                console.log(err)
              })
          },
          onCancel() {
            // 点击取消
            console.log('Cancel')
          },
        })
      }
    },
  },
  computed: {
    title() {
      return this.index > 0 ? '问题反馈' : '新增系统消息'
    },
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
          this.selectedRowKeys = selectedRowKeys
          this.delIds = selectedRows.map((x) => x.id)
        },
        selectedRowKeys: this.selectedRowKeys,
      }
    },
  },
}
</script>

<style lang="less" scoped>
.space {
  margin: 40px 0;
}
</style>
